<template>
	<view class="recharge-wrap">
		<view class="head-box u-flex u-col-center u-row-between">
			<view class="">
				<view class="num-title">账户余额</view>
				<view class="wallet-num">{{ userInfo.balance || '0.00' }}</view>
			</view>
			<!-- <button class="ss-reset-button log-btn"
				@tap="$Router.push({ path: '/pages/user/wallet/top-up-log' })">充值记录</button> -->
		</view>
		<!-- 充值输入卡片-->
		<view class="draw-card">
			<view class="card-title">充值金额</view>
			<view class="input-box u-flex u-col-center">
				<view class="unit">￥</view>
				<input class="u-flex-1"
					type="digit"
					v-model="amount"
					@input="onTopupInput"
					placeholder-style="font-size: 36rpx; font-weight: 500;color:#C2C7CF;"
					placeholder="请输入充值金额"
					style="font-size: 36rpx;" />
			</view>
			<button class="ss-reset-button save-btn"
				:style="{opacity:!amount ? 0.7 : 1 }"
				:disabled="!amount"
				@tap="confirmTopup">确认充值</button>
		</view>
		<!-- 充值说明 -->
		<view class="draw-notice">
			<view class="title">充值说明</view>
			<view class="draw-list">1.充值为在线支付，即时到账，不支持退款；</view>
			<view class="draw-list"> 2.充值后金额会自动进入您的余额账户，请注意查收。 </view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				amount: '',
				loading: false
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			...mapActions(['getUserInfo']),
			// 充值输入框
			onTopupInput(e) {
				this.$nextTick(() => {
					this.amount = this.clearNoNum(e.detail.value)
				})
			},
			async confirmTopup() {
				const that = this;
				if (this.amount <= 0) {
					uni.showToast({
						icon: "none",
						title: '请选择或输入充值金额'
					})
					return;
				}
				if (this.loading) return false
				this.loading = true
				let res = await this.$http.get("/getPayOrder?price=" + this.amount)
				if (res.data.code == 0) {
					let info = res.data.data
					console.log(info)
					uni.requestPayment({
						provider: 'wxpay',
						...info,
						success: (e) => {
							if(e.errMsg == 'requestPayment:ok'){
								uni.navigateBack()
							}
						},
						fail: (e) => {
							console.log(e)
						}
					})
				}
				this.loading = false
			},
			// 校验金额
			clearNoNum(val) {
				if (val == ".") {
					val = "0.";
				}
				val = val.replace(/[^\d.]/g, "");
				//必须保证第一个为数字而不是.
				val = val.replace(/^\./g, "");
				//保证只有出现一个.而没有多个.
				val = val.replace(/\.{2,}/g, ".");
				//保证.只出现一次，而不能出现两次以上
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				//只能输入两位小数
				val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
				if (val.indexOf(".") < 0 && val != "") {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					val = parseFloat(val);
				}
				return val
			}
		}
	}
</script>
<style lang="scss"
	scoped>
	.recharge-wrap {
		width: 100%;
		min-height: 100vh;
		background: #f6f6f6;

		// 充值说明
		.draw-notice {
			min-height: 180rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 35rpx;
			margin: 20rpx 40rpx;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.draw-list {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 10rpx;
			}
		}

		// 充值输入卡片
		.draw-card {
			background-color: #fff;
			border-radius: 20rpx;
			min-height: 400rpx;
			margin: -70rpx 40rpx 30rpx;
			padding: 30rpx;

			.card-title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.input-box {
				width: 624rpx;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				margin-bottom: 80rpx;

				.unit {
					font-size: 48rpx;
					color: #333;
					margin-right: 20rpx;
				}
			}

			.save-btn {
				width: 616rpx;
				height: 90rpx;
				line-height: 86rpx;
				background: linear-gradient(90deg, #ff6000, #FF9800);
				border-radius: 43rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}

		.head-box {
			width: 100%;
			box-sizing: border-box;
			padding: 50rpx 40rpx 100rpx;
			background: #ff6000 url(https://v3.shopro.top/assets/addons/shopro/uniapp/user/withdraw_bg.png) center / 23.4375rem 100% no-repeat;
			border-radius: 0 0 5% 5%;

			.num-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #ffffff;
				margin-bottom: 20rpx;
			}

			.wallet-num {
				font-size: 60rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.log-btn {
				width: 170rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: rgba(255, 255, 255, 0.1);
				border: 1rpx solid #eeeeee;
				border-radius: 30rpx;
				padding: 0;
				font-size: 26rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
</style>